<script lang="ts" setup>
import { get, post, Message, loadFile, message } from '@/utils'
import { TableColumnData } from '@arco-design/web-vue'
import isEmpty from 'lodash/isEmpty'
const props = defineProps<{
  query?: any
}>()
watch(
  () => props.query,
  newVal => {
    getList()
  },
  { deep: true }
)
const list = ref([])
const getList = () => {
  get(
    {
      url: '/server-base/admin/stats/goods/top',
      data: { page: 1, size: 20, ...props.query },
    },
    ({ data }) => {
      list.value = data.records
    }
  )
}
onMounted(() => {
  if (isEmpty(props.query)) getList()
})
const columns: TableColumnData[] = [
  { title: '商品名称', dataIndex: 'name', align: 'center' },
  {
    title: '商品销量',
    dataIndex: 'salesVolume',
    align: 'center',
    sortable: {
      sortDirections: ['ascend'],
    },
  },
]
</script>
<template>
  <a-table :columns="columns" :data="list" :pagination="false">
    <template #name-filter="{ filterValue, setFilterValue, handleFilterConfirm, handleFilterReset }">
      <div class="custom-filter">
        <a-space direction="vertical">
          <a-input :model-value="filterValue[0]" @input="value => setFilterValue([value])" />
          <div class="custom-filter-footer">
            <a-button @click="handleFilterConfirm">Confirm</a-button>
            <a-button @click="handleFilterReset">Reset</a-button>
          </div>
        </a-space>
      </div>
    </template>
  </a-table>
</template>
<style scoped lang="less"></style>
